<?php
echo $javascript->link(array('autocomplete/subject/jquery.autocomplete','autocomplete/jquery.tokeninput', 'tag-option/jquery.optionTree','slider/jquery-ui-1.8.16.custom.min'));
echo $this->Html->css(array('autocomplete/subject/style','autocomplete/token-input-facebook', 'autocomplete/token-input','slider/jquery-ui-1.8.16.custom'));
?>
<style type="text/css">
    select.vertical {
        display: block;
    }
    
</style>
<script type="text/javascript">
    $(function() {
        var options = {
            empty_value:null,
            indexed: true,  // the data in tree is indexed by values (ids), not by labels
            on_each_change: 'tags', // this file will be called with 'id' parameter, JSON data must be returned
            choose: function(level) {
                return 'Choose level ' + level;
            },
            loading_image: 'img/tag/ajax-load.gif',
            show_multiple: false, // if true - will set the size to show all options
            choose: '' // no choose item
        };

        var displayParents = function() {
            var labels = []; // initialize array
            $(this).siblings('select') // find all select
            .find(':selected') // and their current options
            .each(function() { labels.push($(this).text()); }); // and add option text to array
            // $("<div >").html( labels.join(' > ')+"<a class='delete' href='#'> X</a>").appendTo('#demo7-result');  // and display the labels
            if($(this).find(':selected').value!='0'){
                $('#demo7-result').css("background-color","#BAF598");
                 $('#demo7-result').css("border","1px solid");
                $('#demo7-result').html($('<div class="tag_name">').text( labels.join(' > '))); 
                //$('#demo7-result').html($('<div >').text( labels.join(' >')));  //commented on 2 sept
            }
        }
  
        $.getJSON('tags?id=2', function(tree) { // initialize the tree by loading the file first
            $('input[id=demo7]').optionTree(tree, options).change(displayParents);
        
        
        
        });
        
       
 
        $('#more ').live('click',function(){
          
            //alert($('div[id|="#tag"').bind(length));
            //alert($('input[id=demo7]').lenght);
            if($('input[id=demo7]').val()!=''){
                $('#tagpool').append('<div id="'+$('input[id=demo7]').val()+'" class="tag_container">'+$('#demo7-result').html()+"<div class='remove_tag'>X</div><div class='clearfix'></div><div class='edit_tag'>Edit</div><input type='hidden' name='tag_ids[]' value='"+$('input[id=demo7]').val()+"'/></div>");
                $('#tagpool').append($('#attributes').html());
                 $(".tagwrapper").css("background","#EDFFED");
                $(".tagwrapper").css("border","1px solid #999");
                $("#attributes").empty();
                $('#error-message').empty();
                $("#attributes").css("background","");
                $("#attributes").css("border","");
                $("#demo7-result").empty();
                 $('#demo7-result').css("background-color","");
                 $('#demo7-result').css("border","none");
                $.getJSON('tags?id=2', function(tree) { // initialize the tree by loading the file first
                    $('input[id=demo7]').optionTree(tree, options).change(displayParents);
                });
            }
            //$('#tag_values').html($('#tag_values').html()+','+$('#demo7').val());
            $(".remove_tag").bind('click',function(){
                //alert($($($(this).prev()).parent()).attr("id"));
                var currentID=$($(this).prev().parent()).attr("id");
                //alert(currentID);
                $('#'+currentID).remove();
            
             
            });
        });
        
        /*********************** Edit tag chain   **********************/
       
        $(".edit_tag").live('click',function(){
            //alert($($($(this).prev()).parent()).attr("id"));
            var currentID=$($(this).parent()).attr("id");
            //alert($('#'+currentID).remove().html());
            $('#demo7-result').append($('#'+currentID).remove().html());
            //$('#'+currentID).remove();
            var parent_ids='';
            
            $.ajax({
                    url: "tag",
                    global: false,
                    type: "POST",
                    data: {id : currentID },
                    dataType: "html",
                    async:false,
                    success: function(response){
                       x=response;
                           
                  }
               }
            );
              //alert(currentID);  
            var t=x.split(',');
            var options = {
                empty_value: null,
                indexed: true,  // the data in tree is indexed by values (ids), not by labels
                on_each_change: 'tags', // this file will be called with 'id' parameter, JSON data must be returned
                choose:'',
                preselect: {'data[Subject][tag_ids]':t}
            };

            var displayParents = function() {
                var labels = []; // initialize array
                $(this).siblings('select') // find all select
                .find(':selected') // and their current options
                .each(function() { labels.push($(this).text()); }); // and add option text to array
                $('<div>').text(this.value + ':' + labels.join(' > ')).appendTo('#demo5-result');  // and display the labels
            }

            $.getJSON('tags', function(tree) { // initialize the tree by loading the file first
                $('#demo7').optionTree(tree, options).change(displayParents);
                
            });
            var checkpool=$('#tagpool').html();
alert(checkpool);
if(checkpool==''){
     $(".tagwrapper").css("background","");
                $(".tagwrapper").css("border","");
}
            
        });
        
        
        /*********************Edit Tag ends**********************/
         
         
    });
      
</script>


<table id="table" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <?php echo $this->Form->Create('Subject', array('enctype' => 'multipart/form-data')); ?>
            <table cellpadding="10" cellspacing="10">
                <tr>
                    <td id="label" width="110px">Subject<span class="required_field">*</span></td>
                    <td><?php echo $this->Form->input('Subject.subject', array('label' => '','id'=>'title')); ?><div id="error" style="color:red; font-size: 14px"></div></td>
                    <script type="text/javascript">
                                $(document).ready(function() {
                                    $("#title").tokenInput("<?php echo $this->base;?>/admin/Subjects/synonyms",{
                                        theme: "facebook",
                                        preventDuplicates: true,
                                        queryParam: "search",
                                         searchDelay: 500,
                                         tokenLimit: 1
                                         
                                    });
                                });
                            </script>
                </tr>
                
                <tr>
                    <td id="label"  >Specifier</td>
                    <td><?php echo $this->Form->input('Subject.desc', array('label' => '', 'type' => 'text','id'=>'specifier')); ?></td>
                </tr>
                
                <script type="text/javascript">
                            $(document).ready(function(){
		$('#specifier').live('focusout',function(){
                    var title=$('#title').val();
                    var specifier=$(this).val();
                    if(title!=''){
                    $.ajax({
                       url: "subject_suggestion",
                        global: false,
                        type: "GET",
                        data: {title: title,specifier: specifier },
                        dataType: "html",
                        async:false,
                        success: function(response){
                       
                            if(response){
                                $('#error').css("color","red");
                                $('#error').text('Subject Already Added');
                            }else{
                                $('#error').empty();
                            }
                        }
                    
                    });
                }
	});
                            });
                </script>
                <tr><td>&nbsp;</td><td><div id="tagpool" class="tagwrapper"></div></td></tr>
                <tr>
                    <td id="label"  >Tag<span class="required_field">*</span></td>
                    <td style="margin-right: 20px;"><div><?php echo $this->Form->input('Subject.tag_ids', array('label' => '', 'id' => 'demo7', 'type' => 'hidden')); ?><span id="more" class="mybutton"><a href="#">Save</a></span><div id="error-message" class="error-message"></div><div id="tag_values"></div></div>
                    <div class="results" id="demo7-result"><div  id="attributes"></div></div>                   
                    </td>
                </tr>
                <tr>
                    <td id="label" >Image<span class="required_field">*</span></td>
                    <td><?php echo $this->Form->input('Subject.image', array('label' => '', 'type' => 'file','id'=>'image')); ?><div id="missing_image" class="error-message"></div></td>
                </tr>      
                <tr>
                    <td id="label" >Adjectives</td>
                    <td><div style="margin-left: 10px"><?php echo $this->Form->input('Subject.adjective_ids', array('label' => '', 'id' => 'demo-input-facebook-theme')); ?>   

                            <script type="text/javascript">
                                $(document).ready(function() {
                                    $("#demo-input-facebook-theme").tokenInput("adjectives", {
                                        theme: "facebook",
                                        queryParam: "q",
                                        preventDuplicates: true
                                    });
                                });
                            </script>
                        </div>
                    </td>
                </tr> 
                <tr>
                    <td id="label">17+ &nbsp;&nbsp;&nbsp;?</td>
                    <td><?php echo $this->Form->input('17+', array('label' => '', 'type' => 'checkbox')); ?></td>
                </tr>
                
                <tr>
                    <td id="label">Rate It<span class="required_field">*</span></td>
                    <td><div class="meter-div">
              <!-- Slider -->
             
                <input type="hidden" id="amount" value="70" name="rating" style="border:0; color:#f6931f; font-weight:bold;" />
              
              <div id="slider-range-min" style="width:500px;"> </div>
                        </div></td>
                </tr>
                <tr><td colspan="2">&nbsp;</td></tr>
            </table>
            <div style="margin-top:50px; text-align: center;"> <?php echo $this->Form->end(array('label'=>'Add','class'=>'mybutton')); ?><div style="float:right; font-size: 18px;"><span class="required_field">*</span> Required Fields</div></div>
        </td>
    </tr>
</table>
<script language="javascript">
    $(document).ready(function() {
		$( "#slider-range-min" ).slider({
			range: "min",
			value: 0,
			min: 0,
			max: 100,
			slide: function( event, ui ) {
                            
				$( ".ui-slider-handle" ).text( ui.value );
				
				//add color class
				if(ui.value<='25'){
					$( ".ui-slider-handle" ).addClass('low_value');
				}else if(ui.value<='50'){
					$( ".ui-slider-handle" ).addClass('medium_value');
				}
				
			}
		});
		$( ".ui-slider-handle" ).text($( "#slider-range-min" ).slider( "value" ) );
				//add color class
				if('ui.value'<='25' ){
					$( ".ui-slider-handle" ).addClass('low_value');
                                      
				}else if('ui.value'<='50'){
					$( ".ui-slider-handle" ).addClass('medium_value');
				}
				  
	});
        $('#SubjectAdminAddForm').live('submit',function(){
        alert($('#image').val());
        
        $('input[name=rating]').val($( "#slider-range-min" ).slider( "value" ));
        if( $('#title').val()==''){
            $('#error').fadeIn(100);
            $('#error').text('Required').delay(5000).fadeOut(900);
            
            return false;	

        }
        
        if( $('#tagpool').html()==''){
            $('#error-message').fadeIn(100);
            $('#error-message').text('Add atleast one tag to the Subject').delay(5000).fadeOut(900);
            return false;	

        }
        if($('input[name=rating]').val()=='0'){
            if(confirm('Are you sure you want to rate this subject a 0 ?')){
                return true;
            }else{
        return false;        
            }
        }
        
    });
        
    </script>


    